﻿<template>
  <div class="affiliated-businesses">
      <breadcrumb class="breadcrumb-container"></breadcrumb>
      <el-row class="nav">
        <el-form :model="searchForm" size="small" inline>
          <el-form-item label="代理商名称">
            <el-select v-model="searchForm.agent_id" filterable clearable placeholder="全部">
              <el-option v-for="item in agent" :key="item.agent_num" :value="item.agent_num" :label="item.agent_name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商户编号">
            <el-input placeholder="请输入商户编号" v-model="searchForm.serial_num"></el-input>
          </el-form-item>
          <el-form-item label="公司名称">
            <el-input placeholder="请输入公司名称" v-model="searchForm.store"></el-input>
          </el-form-item>
          <el-form-item label="商户简称">
            <el-input placeholder="请输入商户简称" v-model="searchForm.print_name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" size="small" icon="el-icon-search" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-table size="small" :data="shopData" v-loading="loading" :header-cell-style="{background:'#f2f2f2'}">
          <el-table-column label="商户编号" prop="merchant_num" align="center"></el-table-column>
          <el-table-column label="公司名称" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.full_name }} <svg-icon :icon-class="scope.row.is_blue ? 'lh' : ''"></svg-icon> </span>
            </template>
          </el-table-column>
          <el-table-column label="所属代理商" prop="agent_name" align="center"></el-table-column>
          <el-table-column label="申请时间" prop="update_at" align="center"></el-table-column>
          <el-table-column label="门店数量" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.store_quantity }}家</span>
              <el-button type="text" size="small" @click="toCheckShop(scope.row.merchant_id)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="基础资料审核状态" align="center">
            <template slot-scope="scope">
              <span :class="scope.row.base_chk_remark === '部分通过' ? 'warning' : 'success'">{{ scope.row.base_chk_remark }}</span>
            </template>
          </el-table-column>
          <el-table-column label="通道审核状态" align="center">
            <template slot-scope="scope">
              <el-tooltip v-if="scope.row.channel_status.length !== 0" effect="light">
                <div>{{ scope.row.channel_status[0].b_channel + (scope.row.channel_status[0].check_status === 100 ? '申请中' : scope.row.channel_status[0].check_status === 200 ? '已成功' : scope.row.channel_status[0].check_status === -100 ? '已禁用' : scope.row.channel_status[0].check_status === -200 ? '申请失败' : scope.row.channel_status[0].check_status === 110 ? '已审核入驻中' : '无') }} <i class="el-icon-info"></i></div>
                <div slot="content">
                  <p v-for="item in scope.row.channel_status" :key="item.id">
                    <i class="el-icon-remove-outline tip" v-if="item.check_status === 100 || item.check_status === 110"></i>
                    <svg-icon v-else 
                    :icon-class="item.check_status === 200 ? 'success' : item.check_status === -200 ? 'error' : '' "
                    :class="item.check_status === 200 ? 'succ' : item.check_status === -200 ? 'err' : ''"
                    ></svg-icon>
                    {{ item.b_channel + (item.check_status === 100 ? '申请中' : item.check_status === 200 ? '已成功' : item.check_status === -100 ? '已禁用' : item.check_status === -200 ? '申请失败' : item.check_status === 110 ? '已审核入驻中' : '无') }}
                  </p>
                </div>
              </el-tooltip>
              <span v-else>无</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="通道及费率配置" v-if="roles[0] === 0">
          <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleDialogInit(scope.row.merchant_num)">配置</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="to('affiliatedBusinessesList',scope.row.merchant_num)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :total="page.total" :current-page.sync="page.current" layout="total, prev, pager, next, jumper"  class="fr mt20" @current-change="handleCurrentChange" :page-size="page.pageSize"></el-pagination>
      </el-row>
    <el-dialog title="支付通道配置" :visible.sync="dialogVisible" width="700px">
      <channel-react ref="rates" v-if="dialogVisible" :menu="menu" :PosMenu="PosMenu" :tabs="tabs" :merchant_num="merchant_num" @tabUpdate="handleToogleTab"></channel-react>
      <div slot="footer">
        <el-button v-if="tabs && menu.length > 0 && roles[0] === 0" type="primary" size="small" @click="handleModelDialog" :loading="btn_loading">确认修改</el-button>
        <el-button v-if="!tabs && PosMenu.length > 0 && roles[0] === 0" type="primary" size="small" @click="handleModelPosDialog" :loading="pos_loading">确认修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { subCommerInit, subCommerPage, myCommerPosChannelUpdate, subCommerSearch, subCommerGetAgent, myCommerChannelInit, myCommerChannelUpdate, myCommerChannelPosInit } from '@/api/shop'
import { mapGetters } from 'vuex'
import channelReact from './components/index/reactConfig'

export default {
  name: 'AffiliatedBusinessesIndex',
  components: {
    Breadcrumb,
    channelReact
  },
  data() {
    return {
      showBox: false,
      showBox2: false,
      dialogVisible: false,
      btn_loading: false,
      pos_loading: false,
      tabs: true,
      loading: true,
      merchant_num: null,
      model: 0,
      menu: [],
      PosMenu: [],
      agent: [],
      shopData: [],
      page: {
        total: 0,
        pageSize: 0,
        current: 1
      },
      searchForm: {
        serial_num: '',
        store: '',
        print_name: '',
        agent_id: ''
      }
    }
  },
  methods: {
    to(name, id) {
      const _id = id
      if (_id !== undefined) {
        this.$router.push({ name: name, query: { merchant_num: _id }})
      } else {
        this.$router.push({ name: name })
      }
    },
    show(id) {
      this.showBox = true // 根据风险等级显示对应的dialog
    },
    handleCurrentChange(v) {
      this.loading = true
      subCommerPage(this.id, v, this.searchForm).then(response => {
        this.shopData = response.data.result.data
        this.loading = false
      })
    },
    edit(id) {
      this.$router.push({ name: 'merchantDetails', query: { merchant_num: id }})
    },
    search() {
      this.loading = true
      subCommerSearch(this.id, this.searchForm).then(response => {
        this.shopData = response.data.result.data
        this.page.total = response.data.result.total
        this.page.current = response.data.result.current_page
        this.loading = false
      })
    },
    handleDialogInit(id) {
      this.model = 0
      myCommerChannelInit(id).then(res => {
        if (res.data.errorCode === 0) {
          this.merchant_num = id
          this.tabs = true
          this.menu = res.data.result
          this.model++
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
      myCommerChannelPosInit(id).then(res => {
        if (res.data.errorCode === 0) {
          this.PosMenu = res.data.result
          this.model++
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleModelDialog() {
      this.$refs.rates.handleValidMoible().then((obj) => {
        if (obj.valid) {
          this.btn_loading = true
          myCommerChannelUpdate(this.$refs.rates.paychannel, obj.id).then(res => {
            if (res.data.errorCode === 0) {
              this.$message.success(res.data.errorMsg)
              this.btn_loading = false
              this.dialogVisible = false
            } else {
              this.btn_loading = false
              this.$message.error(res.data.errorMsg)
            }
          })
        } else {
          this.$message.error('请认真填写通道费率~')
        }
      })
    },
    toCheckShop(id) {
      this.$router.push({ name: 'checkShop', query: { merchant_num: id }})
    },
    handDialogMenuActive(v) {
      this.active = v
    },
    handDialogPosMenuActive(v) {
      this.posActive = v
    },
    handleModelPosDialog() {
      this.$refs.rates.handleValidPos().then((obj) => {
        if (obj.valid) {
          this.pos_loading = true
          myCommerPosChannelUpdate(obj.id, this.$refs.rates.poschannel, this.$refs.rates.POSChannel).then(res => {
            if (res.data.errorCode === 0) {
              this.pos_loading = false
              this.$message.success(res.data.errorMsg)
            } else {
              this.pos_loading = false
              this.$message.error(res.data.errorMsg)
            }
          })
        } else {
          this.$message.error('请先完成POS机相关配置！')
        }
      })
    },
    handleToogleTab(v) {
      v.index === '0' ? this.tabs = true : v.index === '1' ? this.tabs = false : ''
    }
  },
  mounted() {
    subCommerInit(this.id).then(response => {
      if (response.data.errorCode === 0) {
        this.shopData = response.data.result.data
        this.page.total = response.data.result.total
        this.page.pageSize = response.data.result.per_page
        this.loading = false
      } else {
        this.$message.error(response.data.errorMsg)
        this.loading = false
      }
    })
  },
  created() {
    subCommerGetAgent(this.id).then(response => {
      if (response.data.errorCode === 0) {
        this.agent = response.data.result
      } else {
        this.$message.error(response.data.errorMsg)
      }
    })
  },
  computed: {
    ...mapGetters([
      'id',
      'roles'
    ])
  },
  watch: {
    model(n, o) {
      if (n === 2) {
        this.dialogVisible = true
      } else {
        this.dialogVisible = false
      }
    }
  }
}
</script>